import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'
import img from '@img/all.png'

export const Wrap = styled(StyledMediaContainer)`
	display: flex;
	flex-direction: column;
	* {
		box-sizing: border-box;
	}
`
export const HeaderWrap = styled.div`
	height: 50px;
	min-height: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 0px 0px 0px 10px;
	font-size: 14px;
`
export const CardListWrap = styled.div`
	height: 100px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-right: -30px;
	flex-wrap: wrap;
	/* width:100%; */
	& > div {
		width: calc(50% - 40px);
		margin-right: 35px;
		margin-left: 5px;
	}
	& > div:first-child {
		border-top: 1px #ccc dashed;
	}
	& > div:nth-child(2) {
		border-top: 1px #ccc dashed;
	}
`
export const MeetingCardWrap = styled.div`
	width: 100%;
	height: 250px;
	display: flex;
	flex-direction: column;
	border-bottom: 1px #ccc dashed;
	padding: 10px 0px;
	position: relative;
	font-size: 12px;
	color: rgb(78, 78, 78);
`
export const WrapBG = styled.div`
	background: url(${img}) no-repeat scroll 0px -100px transparent;
	width: 204px;
	height: 204px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	&.gm_meeting_bg {
		background-position: -205px -2623px;
	}
	&.aes_meeting_bg {
		background-position: 0px -2623px;
	}
	&.hidden {
		display: none;
	}
`
export const WrapBody = styled.div`
	width: 100%;
	flex: 1;
	display: flex;
	.main-left {
		width: 100%;
	}
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	.meeting-card-body-line {
		line-height: 24px;
		height: 24px;
		font-size: 12px;
		display: flex;
		.rooms {
			display: flex;
			.room-names {
				width: auto;
			}
		}
		.link-btn {
			color: rgb(0, 122, 192);
			margin-left: 10px;
			text-decoration: underline;
			cursor: pointer;
			font-size: 12px;
		}
		.text {
			font-size: 14px;
			font-weight: 900;
			color: #4e4e4e;
		}
		.text:hover {
			color: #3e9bd0;
			text-decoration: underline;
		}
		.nameSpan {
			display: inline-block;
			max-width: 310px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.conflict-time {
			color: #a21b1b;
		}
		.video-room-info,
		.repeat-room-info {
			border-bottom: 1px solid #1e94da;
			color: #007ac0;
			display: inline-block;
			vertical-align: top;
			margin-left: 10px;
			cursor: pointer;
			text-decoration: none;
		}
	}
	.fixed-right {
		position: absolute;
		top: 0;
		right: 0;
		height: 100px;
		display: flex;
		flex-direction: column;
		.fixed-right-line {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 4px 0px;
			&.quantumEncryption-line {
				margin-top: 10px;
				& > .quantumEncryption {
					margin-left: 15px;
					cursor: auto;
				}
				.quantumEncryption {
					width: 21px;
					height: 21px;
					background-position: -189px -558px;
					background-repeat: no-repeat;
					&.qtmeeting {
						background-position: -441px -558px;
					}
					&.aesmeeting {
						background-position: -357px -558px;
					}
					&.gmeeting {
						background-position: -378px -558px;
					}
					&.cmeeting {
						background-position: -294px -558px;
					}
					&.vmeeting {
						background-position: -189px -558px;
					}
					&.rmeeting {
						background-position: -42px -558px;
					}
				}
			}
		}
		.mt-each {
			width: 40px;
			height: 55px;
			justify-content: center;
			display: flex;
			flex-direction: column;
			cursor: pointer;
			.mt-each-header {
				display: flex;
				justify-content: center;
			}
			.mt-each-name {
				height: 30px;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
		}
	}
`
export const WrapFooter = styled.div`
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.btn {
		margin-left: 10px;
		height: 25px;
		line-height: 25px;
	}
	.notice {
		color: red;
	}
`
export const FileIcon = styled.i`
	& > span {
		width: 30px;
		height: 30px;
		margin-left: 10px;
		background-position: -120px -305px;
		background-image: url(${img});
		&:hover {
			background-position: -150px -305px;
		}
	}
`
export const StyledDeleteMeetingDialog = styled.div`
	margin: 44px 33px 0 33px;
	.other-reason {
		display: flex;
		// margin-top: 25px;
		height: 23px;
		.reason-input {
			margin-left: 20px;
		}
	}
	.radio {
		margin-bottom: 20px;
	}
`
